<!-- 图片列表 -->
<template>
  <view class="imgList">
    <child-header-bar :childTitle="childTitle" @getMarginTop="getMarginTop"></child-header-bar>
    <view class="imgList-content" :style="[{'top': top + 'px'}]">
      <view class="img-list-box">
        <view class="img-item" @click="toViewLargeImg(item, index)" v-for="(item, index) in imgList" :key="index">
          <image :src="item.imgUrl" mode=""></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        childTitle: '图片列表',
        top: 0,
        imgList: [],
        snowPackId:''
      };
    },
    onReachBottom() {
      console.log(123)
      let param = [{
          imgUrl: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F8b0f8331f4c4a13d3a94f8761e5e583c30242e8e13bf7-eGTYCv_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668319094&t=2221b096e144ca84667c7d56f14b6c99",
        },
        {
          imgUrl: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fff16edba4a7122476c64fa5ad7053a92ce99ae013bd9f-eaemlO_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668319094&t=7c4811ba3f4c2afc87d33109d868dba0",
        },
      ]
      this.imgList = this.imgList.concat(param)

    },
    onLoad(options) {
      if (options.snowPackId) {
        this.snowPackId = options.snowPackId
        this.getSnowPackIntro()
      }
    },
    methods: {
      // 获取当前雪场的轮播图
      getSwiperList(data) {
        if (data.photo) {
          this.imgList = data.photo.split(',')
        }
      },
      // 获取雪场详情
      getSnowPackIntro() {
        let _this = this
        uni.request({
          url: _this.$httpApi.install.getSlopeIntro + _this.snowPackId,
          method: 'GET',
          success(res) {
            if (res.data.code == 200) {
              console.log(res)
              _this.getSwiperList(res.data.data)
            } else {
              console.log(res.msg)
            }
          },
          fail(error) {},
        })
      },
      toViewLargeImg(item, index) {
        let url = []
        for (let i = 0; i < this.imgList.length; i++) {
          url.push(this.imgList[i].imgUrl)
        }
        uni.previewImage({
          current: index, //预览图片的下标
          urls: url //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
        })
      },
      // 动态接收导航栏高度
      getMarginTop(marginTop) {
        this.top = marginTop ? marginTop : 150
      },
    }
  };
</script>
<style>
  page {
    width: 100%;
    height: 100%;
    background-color: #F8FAFE;
  }
</style>

<style lang="scss" scoped>
  .imgList-content {
    position: absolute;

    .img-list-box {
      display: flex;
      flex-wrap: wrap;
      padding: 30rpx;
      justify-content: space-between;

      .img-item {
        width: 335rpx;
        height: 335rpx;

        border-radius: 20rpx;

        &:nth-child(n+2) {
          margin-bottom: 20rpx;
        }

        image {
          width: 100%;
          height: 100%;
          border-radius: 20rpx;
        }
      }
    }
  }
</style>